<template>
    <div class="hotcate-container">
        <h1>热门分类</h1>
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="item in hotList" class="items">
                <van-image :src="item.img" />
                <span>{{ item.title }}</span>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHotList } from '@/request'
const hotList = ref([])
onMounted(async () => {
    const res = await getHotList()
    hotList.value = [
        ...res.data,
        { title: '更多...' }
    ]
})
</script>

<style lang="scss" scoped>
.hotcate-container {
    background-color: #fff;
    h1 {
        font-weight: 400;
        font-size: 16px;
        color: #666;
        padding-left: 10px;
    }

    .items:last-child ::v-deep(.van-image) {
        display: none;
    }

}
</style>